<template>
  <div class="page-base">
    <div class="left-container">
      <img class="img-left" src="/logo.png" />
    </div>
    <div class="right-container">
      <div style="justify-content: center; display: flex">
        <img class="login-img" src="/logo.png" />
        <div class="login-tip">欢迎登录</div>
      </div>
      <div class="input-container">
        <MyLoginInputView title="账号" v-model="account" @onEnter="login" />
        <MyLoginInputView title="密码" v-model="pwd" @onEnter="login" />
      </div>
      <div class="login-btn" @click="login">登录</div>
    </div>
    <div style="background-color: white; width: 15%"></div>
  </div>
</template>
<script lang="ts" setup name="LoginPage">
import MyLoginInputView from '@/components/MyLoginInputView.vue'
import myRouter from '@/router'
import { ref } from 'vue'
import MyApi from '../api/apis'
import { loginSuccess } from '../stores/loginStore'
import { isApiOkAndNotEmpty } from '@/utils/httputils'
import { toast } from '@/components/components/toast/my-toast'
import { hideLoading, showLoading } from '@/components/components/loadingdialog/my-loading-dialog'
const tempUser: string = import.meta.env.VITE_DEF_USER
const tempPwd: string = import.meta.env.VITE_DEF_PWD
const account = ref(tempUser)
const pwd = ref(tempPwd)

async function login() {
  if (account.value && pwd.value) {
    showLoading('正在登录...')
    const resp = await MyApi.login(account.value, pwd.value)
    if (isApiOkAndNotEmpty(resp)) {
      setTimeout(() => {
        hideLoading()
        loginSuccess(resp.data!.token, resp.data!.userName)
        myRouter.replace('/')
      }, 1500)
    } else {
      toast(resp.message)
    }
  } else {
    toast('请输入账号和密码')
  }
}
</script>
<style lang="css" scoped>
/*样式 */
.left-container {
  flex: 1;
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  height: 100vh;
}

.right-container {
  padding-top: 50px;
  padding-bottom: 30px;
  background-color: white;
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-left {
  width: 50%;
}

/*-------------------------------------------- */
.login-img {
  display: inline-block;
  width: 30px;
}

.login-tip {
  display: inline-block;
  margin-left: 10px;
  font-size: larger;
  font-weight: bold;
  font-style: italic;
  color: var(--main-color);
}

.input-container {
  margin-top: 35px;
}

.login-btn {
  cursor: pointer;
  width: 45%;
  text-align: center;
  color: white;
  margin-top: 15px;
  font-size: medium;
  font-weight: bold;
  background-color: var(--main-color2);
  border-radius: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s;
}

.login-btn:hover {
  background-color: var(--main-color);
}

/*-----------------------------------------------------------------*/
.msg-style {
  color: rgb(241, 17, 17);
  height: 50px;
  line-height: 50px;
  text-align: center;
  letter-spacing: 2px;
  font-size: small;
}
</style>
